<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
</head>
<body>
    你爱好的运动是
    <input type="checkbox"/>全选/全不选（全选自动勾选）<br>
    <input type="checkbox" value="a"/>足球
    <input type="checkbox" value="a"/>篮球
    <input type="checkbox" value="a"/>羽毛球
    <input type="checkbox" value="a">乒乓球<br>
    <button class="all">全选</button>
    <button class="no">全不选</button>
    <button class="reverse">反选</button>
    <button class="print">提交并打印</button><br>
    <ul>
        <li class="bj">北京</li>
        <li>上海</li>
        <li>四川</li>
        <li>深圳</li>
    </ul>
    <button class="add">创建一个广州节点</button><br>
    <button class="insert">将广州节点插入到北京前面</button><br>
    <button class="replace">使用广州节点替换北京节点</button><br>
    <button class="remove">删除广州节点</button><br>
    <button class="read">读取当前城市列表结构</button><br>
    <button class="child">读取北京内的节点</button>
    <script>
        let box=document.querySelectorAll('input[value=a]');
        let all=document.querySelector('.all');
        let no=document.querySelector('.no');
        let reverse=document.querySelector('.reverse');
        let print=document.querySelector('.print');
        all.onclick = function(){
            box.forEach(function(v){
                if(v.checked==false){
                    v.checked=true;}
            })
        }
        no.onclick = function(){
            box.forEach(function(v){
                if(v.checked==true){
                    v.checked=false;}
            })
        }
        reverse.onclick = function(){
            box.forEach(function(v){
                v.checked=!v.checked;
            })
        }
        print.onclick = function(){
            box.forEach(function(v){
                if(v.checked==true){
                    console.log(v.nextSibling)
                }
            })
        }
        ////////////////////////////////////////////////////////////////////////
        let add=document.querySelector('.add')
        let insert=document.querySelector('.insert')
        let replace=document.querySelector('.replace')
        let remove=document.querySelector('.remove')
        let read=document.querySelector('.read')
        let child=document.querySelector('.child')
        let ul=document.querySelector('ul'),li
        let bj=document.querySelector('.bj')
        add.onclick = function(){
            li=document.createElement('li')
            li.append('广州')
        }
        insert.onclick = function(){
            ul.insertBefore(li,ul.firstChild)
        }
        replace.onclick = function(){
            ul.replaceChild(li,bj)
        }
        remove.onclick=function(){
            ul.removeChild(li)
        }
        read.onclick=function(){
           console.log(ul);
        }
        child.onclick=function(){
            console.log(ul.children[0].childNodes)
        }
    </script>
</body>
</html>